<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const color = '#ff0000';
        const mapping = {
            0: 0,
            1: 1,
            2: 2,
            3: 3,
            4: 4,
            5: 5,
            6: 6,
            7: 7,
            8: 8,
            9: 9,
            a: 10,
            b: 11,
            c: 12,
            d: 13,
            e: 14,
            f: 15,
        };
        const expect = 'rgb(255, 0, 0)';
        const colorStr = color.substr(1); // ff0000
        let res = [];//[255, 0, 0]
        for (let i = 0; i < colorStr .length; i += 2) {
            const letter1 = colorStr[i]; // f  0  0
            const letter2 = colorStr[i + 1]; // f  0  0
            const num1 = mapping[letter1];//15
            const num2 = mapping[letter2];//15
            const color = num1 * 16 + num2;
            res.push(color);
        }
        console.log(res);
        console.log(`rgb(${res.join(',')})`);

    </script>
</body>
</html>